
<template>
  <div class="top_nav">
    <div class="saas_top_title">拖拽生成小程序</div>
    <div class="saas_top_right">
      <div class="saas_package_update">套餐升级</div>
      <div class="saas_kefu_news">客服消息</div>
      <div class="user_guide_box">帮助指引</div>
      <div class="saas_account_menu">
        <a-icon type="menu" />
        <ul class="account_menu">
          <li class="account_menu_item">
            <div>
              <a-icon type="user" />
              <span>账号信息 </span>
            </div>
          </li>
          <li class="account_menu_item">
            <div>
              <a-icon type="poweroff" />
              <span>退出账号</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.top_nav {
  background: #fff;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px #f6f6f6 solid;
  .saas_top_title {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
  }
  .saas_top_right {
    float: right;
    display: flex;
    div {
      padding: 0 15px;
      cursor: pointer;
      transition: 0.2s;
      &:hover {
        color: #1890ff;
      }
    }
    .saas_account_menu {
      position: relative;
      box-sizing: border-box;
      .account_menu {
        position: absolute;
        top: 48px;
        right: 10px;
        z-index: 3000;
        width: 150px;
        display: none;
        font-size: 14px;
        color: #61616a;
        background: #fff;
        list-style: none; /*清除列表默认样式*/
        padding: 0; /*清除padding*/
        margin: 0;
        box-shadow: 0 2px 10px 0 rgba(15, 12, 70, 0.1);
        border: 1px solid #e5e4e9;
        border-radius: 4px;
        text-align: center;
        .account_menu_item {
          padding: 0 10px;
          transition: 0.1s;
          div {
            border-bottom: 1px solid #e5e4e9;
            span {
              margin-left: 10px;
            }
          }
          &:hover {
            background: #f3f3f3;
            color: blue;
          }
        }
      }
      &:hover .account_menu {
        display: block;
      }
    }
  }
}
</style>